<template>
	<view class="exercise-page1-container container" @touchstart="onTouchStart" @touchmove="onTouchMove">
		<view class="page-top flex">
			<view class="left flex">
				<BackButton class="back-button" :size="42" url="/pages/start/index" @nav="navHandle"></BackButton>
				<view class="time-box flex">
					<image class="eye" src="@/static/images/icon/alarmClock.png" mode="aspectFit"></image>
					<view class="time">{{timeToText(totalTime)}}</view>
				</view>
			</view>
			<view class="tips">双眼注视小鸟, 用手指控制它在路径上运动</view>
			<view class="avatar-box" @tap="">
				<Avatar class="avatar" :size="36" :type="2"></Avatar>
				<image class="arrow-left" src="@/static/images/icon/arrow-left.png" mode="aspectFit"></image>
			</view>
		</view>
		<image class="animal" :style="`left:${x}px;top:${y}px`" src="@/static/images/animal/bird.png" mode="aspectFit">
		</image>
		<image class="start-text" v-show="!playing" src="@/static/images/font/clickStart.png" @tap="start" mode="aspectFit">
		</image>
		<image v-show="playing" class="stop" src="@/static/images/icon/stop.png" @tap="stop" mode="aspectFit"></image>
	</view>
</template>

<script>
	import BackButton from '@/components/BackButton'
	import Avatar from '@/components/Avatar'
	import {
		getTodayProgress,
		setTodayProgress,
		getSettings
	} from '@/api/system/user'
	import {
		timeToText
	} from '@/utils/timeToText.js'
	export default {
		components: {
			BackButton,
			Avatar
		},
		onLoad() {
			// uni.setScreenOrientation('landscape')
			getSettings().then((res) => {
				this.sensitivity = (res.eyeTrackingSensitivity + 50) / 100;
			});
		},
		beforeDestroy() {
			// uni.setScreenOrientation('portrait')
		},
		data() {
			return {
				totalTime: this.$store.state.user.sportsData.totalTimeSet,
				y: 130,
				x: 65,
				startX: 0,
				startY: 0,
				playing: false,
				timer: null,
				sensitivity: 100,
			};
		},
		methods: {
			timeToText,
			start() {
				this.playing = true;
				this.timer = setInterval(() => {
					this.totalTime--;
					if (this.totalTime <= 0) {
						clearInterval(this.timer);
					}
				}, 1000);
			},
			stop() {
				this.playing = false;
				clearInterval(this.timer);
			},
			onTouchStart(e) {
				if (!this.playing) return;
				this.startX = e.touches[0].clientX;
				this.startY = e.touches[0].clientY;
			},
			onTouchMove(e) {
				if (!this.playing) return;
				const curX = e.touches[0].clientX;
				const curY = e.touches[0].clientY;
				let offsetX = curX - this.startX;
				let offsetY = curY - this.startY;
				this.startX += offsetX;
				this.startY += offsetY;
				offsetX *= this.sensitivity;
				offsetY *= this.sensitivity;
				this.x += offsetX;
				this.y += offsetY;
			},
			async navHandle() {
				// uni.setScreenOrientation('portrait')
				const res = await getTodayProgress();
				if (res) {
					res.date = new Date().getTime();
					res.totalTime += this.$store.state.user.sportsData.totalTimeSet - this.totalTime;
					setTodayProgress(res);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		// background-image: url("@/static/images/background/7.eyeMotion2.jpg");
		// background-size: cover;
		// width: 100vw;
		// height: 100vh;
		// position: fixed;
	}

	.exercise-page1-container {
		background-image: url("@/static/images/background/7.eyeMotion2.jpg");
		background-size: cover;
		width: 100vw;
		height: 100vh;
		position: fixed;

		.page-top {
			padding-top: 10upx;
			justify-content: space-between;

			.left {
				position: relative;

				.back-button {
					margin-left: 16upx;
				}

				.time-box {
					position: absolute;
					left: 55upx;

					.eye {
						width: 26upx;
						height: 26upx;
						margin-top: 7upx;
						margin-left: 8upx;
					}

					.time {
						color: #00E98E;
						font-size: 18upx;
						font-weight: bold;
						margin-top: 7upx;
						margin-left: 8upx;
						white-space: nowrap;
					}
				}
			}

			.tips {
				margin-top: 10upx;
				font-size: 14upx;
				color: #6D6A6A;
			}

			.avatar-box {
				position: relative;

				.avatar {
					margin-right: 15upx;
				}

				.arrow-left {
					width: 24upx;
					height: 24upx;
					transform: rotate(-90deg);
					position: absolute;
					bottom: -10upx;
					left: 7upx;
				}
			}

		}


		.animal {
			width: 130upx;
			height: 130upx;
			// margin-left: 50upx;
			// margin-top: 100upx;
			position: absolute;
		}

		.start-text {
			width: 110upx;
			height: 70upx;
			position: absolute;
			bottom: 15upx;
			left: 315upx;
		}

		.stop {
			width: 40upx;
			height: 40upx;
			position: absolute;
			right: 10upx;
			bottom: 10upx;
		}
	}
</style>